<template>
  <div class="m-header-main-box">
    <!--第一版本导航栏-->

<!--    <div class="mHeader-main-box">

    &lt;!&ndash;头像按钮&ndash;&gt;
      <img src="../assets/images/2.jpg" class="m-header-img" alt="" @click="openClose">

      &lt;!&ndash;写博客按钮&ndash;&gt;
      <el-button type="danger" icon="el-icon-edit" plain size="mini" @click="$router.push('/writer')">写宠博</el-button>

    &lt;!&ndash;三角面包按钮&ndash;&gt;
      <div class="toggle"  @click="toggle">
        <span
          class="toggle-line"
          v-for="(line, index) in toggleLineData"
          :key="index"
          :style="{
            width: line.width,
            top: line.top,
            transform: line.transform,
            opacity: line.opacity,
            transition: 'all .3s'
          }">
        </span>
      </div>
    </div>

    <el-input suffix-icon="el-icon-search" placeholder="搜索用户或者宠博..." class="mHeader-input-search" size="small"></el-input>

    &lt;!&ndash;右侧的常规伸缩菜单&ndash;&gt;
    <div class="header-tab-view" v-show="normalCollapse">
      <div class="divider"></div>
      <div class="tab" @click="$router.push('/')"><i class="iconfont icon-guangchang"></i><span>广场</span></div>
      <div class="tab" @click="$router.push('/follow')"><i class="iconfont icon-guanzhu"></i><span>关注</span></div>
      <div class="tab" @click="$router.push('/message')"><i class="iconfont icon-icon"></i><span>消息</span></div>
    </div>

    &lt;!&ndash;头像的伸缩菜单&ndash;&gt;
    <div class="header-tab-view" v-show="headCollapse">
      <div class="divider"></div>
      <div class="tab" @click="$router.push('/homepage')" ><i class="iconfont icon-zhuye"></i><span>主页</span></div>
      <div class="tab" @click="$router.push('/collection')"><i class="iconfont icon-collection-b"></i><span>收藏</span></div>
      <div class="tab" @click="$router.push('/settings')"><i class="iconfont icon-shezhi"></i><span>设置</span></div>
      <div class="tab"><i class="iconfont icon-tuichu"></i><span>退出</span></div>
    </div>-->



    <!--第二版本导航栏-->

    <div  class="bottom-button" @click="$router.push('/')"><div style="vertical-align: bottom"><i class="iconfont icon-guangchang"></i><span class="bottom-span">广场</span></div></div>
    <div  class="bottom-button" @click="$router.push('/search')"><i class="iconfont icon-sousuo"></i><span class="bottom-span">搜索</span></div>
    <div  class="bottom-button" style="width: 18%" @click="switchLogin('/writer')"><span class="writer-button"><i class="iconfont icon-jiajianzujianjiahao"></i></span></div>
    <div  class="bottom-button" @click="switchLogin('/message')"><i class="iconfont icon-icon"></i><span class="bottom-span">消息</span></div>
    <div  class="bottom-button" @click="switchLogin('/my')"><i class="iconfont icon-gerenzhongxin"></i><span class="bottom-span">我的</span></div>




  </div>
</template>

<script>
  import Cookies from 'js-cookie'

    export default {
      name: "mHeader",
      data(){
        return{
          /*headCollapse: false,
          normalCollapse:false,
          toggleLineData: [],
          lineStyle: {
            normalLineData: [
              {
                width: '100%',
                top: '0px',
                transform: 'rotateZ(0deg)',
                opacity: '1'
              },
              {
                width: '100%',
                top: '0px',
                transform: 'rotateZ(0deg)',
                opacity: '1'
              },
              {
                width: '100%',
                top: '0px',
                transform: 'rotateZ(0deg)',
                opacity: '1'
              }
            ],
            closeLineData: [
              {
                width: '100%',
                top: '6px',
                transform: 'rotateZ(-45deg)',
                opacity: '1'
              },
              {
                width: '100%',
                top: '0px',
                transform: 'rotateZ(0deg)',
                opacity: '0'
              },
              {
                width: '100%',
                top: '-6px',
                transform: 'rotateZ(45deg)',
                opacity: '1'
              }
            ]
          },*/
        }
      },
      created(){
        // this.toggleLineData = this.lineStyle.normalLineData
      },
      methods: {
/*        openClose(){
          this.headCollapse=!this.headCollapse;
        },
        toggle () {
          this.normalCollapse = !this.normalCollapse;
          this.toggleLineData = this.normalCollapse ? this.lineStyle.closeLineData : this.lineStyle.normalLineData;
        },*/
        switchLogin(value){
          if(Cookies.get('token')){
            this.$router.push(value);
          }else{
            this.$message.error('请先登录，在完成后续操作');
            this.$router.push('/login');
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "../stylus/color.styl"
/*  .mHeader-main-box{
    display flex
    justify-content space-between
    align-items center
  }
  .m-header-img{
    height: 50px;
    width: 50px;
    border-radius: 50px;
  }
  .header-tab-view{
    position: relative;
    font-size: 14px;
    margin-bottom: 30px;
    animation: show .5s;
  }
  .mHeader-input-search{
    margin-top 20px
  }
  .tab{
    position: relative;
    width: 100%;
    padding: 8px 15px;
    font-size: 12px;
    line-height: 1;
  }
  .divider{
    width: 100%;
    position: relative;
    height: 1px;
    margin-top 12px
    margin-bottom 4px
    background-color: $color-divider;
  }
  .iconfont{
    margin-right 10px
    margin-left -10px
  }
  .icon-guangchang{
    font-size 13px
  }
  .icon-guanzhu{
    font-size 13px
    margin-right 9px
  }
  .icon-icon{
    font-size 15px
    margin-right 9px
  }
  .icon-zhuye{
    font-size 16px
    margin-right 8px
  }
  .icon-collection-b{
    font-size 13px;
    margin-right 10px
  }
  .icon-shezhi{
    font-size 12px
    margin-right 12px
  }
  .icon-tuichu{
    font-size 11px;
    margin-right 12px
  }



  !*右侧的面包伸缩按钮*!
  .toggle {
    width: 24px
    height: 24px
    background-color: #f9f9f9
    padding: 5px
    cursor: pointer
    line-height: 0
  }
  .toggle-line {
    position: relative
    display: inline-block
    vertical-align: top
    width: 100%
    height: 2px
    margin-top: 4px
    background-color: $color-main
  }

  .tab{
    color $color-main
  }

  .tab:hover{
    color $color-background
    background-color $color-main
    cursor pointer
  }


  @keyframes show {
    from {
      margin-top: -30px;
      opacity: 0;
    }
    to {
      margin-top: 0px;
      opacity: 1;
    }
  }*/

  .m-header-main-box{
    border-top 1px solid $color-border
    width 100%
    height 40px
  }
  .bottom-button{
    text-align center
    width 19%
    vertical-align bottom
    height 56px
    padding-top 5px
    color $color-content
    display inline-block
  }
  .bottom-button:hover{
    color $color-main
  }
  .bottom-span{
    display block
    font-size 12px
  }
  .writer-button{
    font-size 20px
    color #ffffff
    display inline-block
    background-color $color-main
    width 32px
    border-radius 16px
    height 32px
    line-height 32px
  }



    //字体图标
  .icon-jiajianzujianjiahao{
    font-size 16px

  }
</style>
